import React, {useState} from 'react';
import {Divider, Select, Space, Typography} from 'antd';
import style from './RelationChart.module.scss';
import {Column, Scatter} from '@ant-design/charts';
import {usePrefersColorScheme} from '@anatoliygatt/use-prefers-color-scheme';

export function RelationChart(props) {
  const {spearman, distribution, sample} = props.data;
  const options=distribution.map((dist, idx)=>({
    value: idx, label: dist.displayName,
  }));
  const [varA, setVarA]=useState(0);
  const [varB, setVarB]=useState(1);
  const prefersColorScheme = usePrefersColorScheme();
  const isDarkMode = prefersColorScheme === 'dark';

  const [co, p]=spearman[varA+'_'+varB];

  let pText;
  if (p<0.001) {
    pText=('极其显著');
  } else if (p < 0.05) {
    pText=('显著');
  } else {
    pText=('不显著');
  }

  const itemA=distribution[varA];
  const itemB=distribution[varB];

  const scatterConfig = sample && {
    padding: 'auto',
    appendPadding: [32, 24, 16, 24],
    theme: isDarkMode?'dark':'default', // 'dark',
    data: sample.map((arr)=>{
      const obj={};
      for (let i = 0; i < arr.length; i++) {
        obj['_'+i]=arr[i];
      }
      return obj;
    }),
    xField: '_'+varA,
    yField: '_'+varB,
    pointStyle: {
      lineWidth: 0,
      fill: 'rgb(91,143,249)',
      opacity: 0.2,
    },
    meta: {
      ['_'+varA]: {
        alias: itemA.displayName,
        type: itemA.useLog?'log':'linear',
      },
      ['_'+varB]: {
        alias: itemB.displayName,
        type: itemB.useLog?'log':'linear',
      },
    },
    size: 4,
    xAxis: {
      title: {
        text: itemA.displayName,
      },
      label: {
        offset: 18,
        formatter: (date)=>{
          if (itemA.name==='publish_date') {
            return new Date(date*1000).getFullYear();
          }
          return date;
        },
      },
    },
    yAxis: {
      title: {
        text: itemB.displayName,
      },
      label: {
        offset: 16,
        formatter: (date)=>{
          if (itemB.name==='publish_date') {
            return new Date(date*1000).getFullYear();
          }
          return date;
        },
      },
    },
  };


  const getDistConfig=(dist)=>{
    return {
      padding: 'auto',
      appendPadding: [32, 24, 16, 24],
      theme: isDarkMode?'dark':'default',
      meta: {
        key: {alias: dist.displayName, type: dist.useLog?'log': 'linear'},
        value: {alias: '数量'},
      },
      data: dist.data,
      xField: 'key',
      yField: 'value',
      xAxis: {
        title: {
          text: dist.displayName,
        },
        label: {
          offset: 18,
          formatter: (date)=>{
            if (dist.name==='publish_date') {
              return new Date(date*1000).getFullYear();
            }
            return date;
          },
        },
      },
      yAxis: {
        title: {
          text: '数量',
        },
      },
      maxColumnWidth: dist.useLog?undefined:Math.max(1, 200/dist.segments*1.1),
      minColumnWidth: dist.useLog?undefined:Math.max(1, 200/dist.segments*1.1),
    };
  };

  return <Space style={{width: '100%'}} direction={'vertical'}>
    <Space direction={'horizontal'}>
      <Typography.Text>横轴：</Typography.Text><Select className={style.dropdown} onChange={(option)=>setVarA(option)} value={varA} options={options}/>
      <Divider/>
      <Typography.Text>纵轴：</Typography.Text><Select className={style.dropdown} onChange={((option)=>setVarB(option))} value={varB} options={options}/>
    </Space>
    <Typography.Paragraph>
      Spearman 相关系数<span className={style.math}> r = {co}</span>，显著水平<span className={style.math}> p = {p}</span>，结果为 <span className={style.math}>{pText}</span>。
    </Typography.Paragraph>
    {varA===varB?
        <Column className={style.graph} {...getDistConfig(distribution[varA])}/>:
        <Scatter className={style.graph} {...scatterConfig}/>}
  </Space>;
}
